<template>
  <div class="case-collection">
    <el-card>
      <div class="header-row">
        <el-input
          v-model="searchText"
          placeholder="输入关键词搜索（标题/场景/亮点）"
          clearable
          style="width:260px;margin-right:18px;"
        />
        <el-button type="primary" @click="handleAdd">新增案例</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="item in filteredList" :key="item.id">
          <el-card shadow="hover" class="case-card">
            <div class="case-title">{{ item.title }}</div>
            <div class="case-scene">{{ item.scene }}</div>
            <div class="case-highlight">亮点：{{ item.highlight }}</div>
            <div class="case-experience">经验：{{ item.experience }}</div>
            <div class="card-actions">
              <el-button size="small" text type="primary" @click="showDetail(item)">详情</el-button>
              <el-button size="small" text type="warning" @click="handleEdit(item)">编辑</el-button>
              <el-button size="small" text type="danger" @click="handleDelete(item)">删除</el-button>
            </div>
          </el-card>
        </el-col>
        <el-empty v-if="filteredList.length === 0" description="暂无匹配案例"/>
      </el-row>
    </el-card>
    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="案例详情" width="560px" destroy-on-close>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="案例标题">{{ detailRow.title }}</el-descriptions-item>
        <el-descriptions-item label="适用场景">{{ detailRow.scene }}</el-descriptions-item>
        <el-descriptions-item label="处理流程">{{ detailRow.process }}</el-descriptions-item>
        <el-descriptions-item label="亮点">{{ detailRow.highlight }}</el-descriptions-item>
        <el-descriptions-item label="经验分享">{{ detailRow.experience }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="editVisible" :title="editTitle" width="560px" destroy-on-close>
      <el-form :model="editRow" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="案例标题" prop="title">
          <el-input v-model="editRow.title"/>
        </el-form-item>
        <el-form-item label="适用场景" prop="scene">
          <el-input v-model="editRow.scene"/>
        </el-form-item>
        <el-form-item label="处理流程" prop="process">
          <el-input v-model="editRow.process" type="textarea"/>
        </el-form-item>
        <el-form-item label="亮点" prop="highlight">
          <el-input v-model="editRow.highlight"/>
        </el-form-item>
        <el-form-item label="经验分享" prop="experience">
          <el-input v-model="editRow.experience" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible=false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
    <!-- 删除确认弹窗 -->
    <el-dialog v-model="deleteVisible" title="提示" width="320px" center>
      <div>确定要删除该案例条目吗？</div>
      <template #footer>
        <el-button @click="deleteVisible=false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 用唯一id确保增删改查不丢数据
interface CaseItem {
  id: number
  title: string
  scene: string
  process: string
  highlight: string
  experience: string
}

let idSeed = 1
const caseList = ref<CaseItem[]>([
  {
    id: idSeed++,
    title: '电梯应急救援典型案例',
    scene: '高层住宅电梯困人',
    process: '及时停梯、通知维保、安抚被困、专业解救',
    highlight: '应急响应快、沟通高效',
    experience: '建议各物业定期演练，提高救援效率。'
  },
  {
    id: idSeed++,
    title: '空调能效提升改造',
    scene: '写字楼中央空调高能耗',
    process: '能耗监测、负载分析、设备升级',
    highlight: '节能率提升15%',
    experience: '实施前后监测对比，持续优化节能措施。'
  },
  {
    id: idSeed++,
    title: '净水设备管路消杀',
    scene: '医院饮用水管道维护',
    process: '定期消杀、滤芯更换、出水检测',
    highlight: '水质合格率提升',
    experience: '医疗场所需严格按标准操作，避免交叉污染。'
  },
  {
    id: idSeed++,
    title: '消防泵远程监控改造',
    scene: '工业园消防管理升级',
    process: '设备联网、报警联动、远程监控平台',
    highlight: '隐患报警及时率高',
    experience: '平台上线后年故障率下降30%。'
  },
  {
    id: idSeed++,
    title: '配电柜智能巡检',
    scene: '大型商场配电系统',
    process: '智能巡检机器人巡查、红外测温、异常上报',
    highlight: '发现早、处置快',
    experience: '智能化手段大大减轻人工巡检压力。'
  },
  {
    id: idSeed++,
    title: '空气净化器群控实践',
    scene: '写字楼公共区空气治理',
    process: '集中管控、分区检测、自动联动',
    highlight: '空气质量可视化',
    experience: '建议引入数据大屏，实现可追溯治理。'
  }
])

const searchText = ref('')
const filteredList = computed(() =>
  searchText.value
    ? caseList.value.filter(row =>
        row.title.includes(searchText.value) ||
        row.scene.includes(searchText.value) ||
        row.highlight.includes(searchText.value)
      )
    : caseList.value
)

// 详情弹窗
const dialogVisible = ref(false)
const detailRow = ref<CaseItem>({
  id: 0,
  title: '',
  scene: '',
  process: '',
  highlight: '',
  experience: ''
})
function showDetail(row: CaseItem) {
  detailRow.value = { ...row }
  dialogVisible.value = true
}

// 新增/编辑弹窗
const editVisible = ref(false)
const editTitle = ref('新增案例')
const editRow = reactive<CaseItem>({
  id: 0,
  title: '',
  scene: '',
  process: '',
  highlight: '',
  experience: ''
})
const formRef = ref()
const formRules = {
  title: [{ required: true, message: '必填', trigger: 'blur' }],
  scene: [{ required: true, message: '必填', trigger: 'blur' }],
  process: [{ required: true, message: '必填', trigger: 'blur' }],
  highlight: [{ required: true, message: '必填', trigger: 'blur' }],
  experience: [{ required: true, message: '必填', trigger: 'blur' }]
}
function handleAdd() {
  editTitle.value = '新增案例'
  Object.assign(editRow, { id: 0, title: '', scene: '', process: '', highlight: '', experience: '' })
  editVisible.value = true
}
function handleEdit(row: CaseItem) {
  editTitle.value = '编辑案例'
  Object.assign(editRow, row)
  editVisible.value = true
}
function submitEdit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return
    if (editTitle.value.startsWith('编辑')) {
      const idx = caseList.value.findIndex(t => t.id === editRow.id)
      if (idx !== -1) caseList.value[idx] = { ...editRow }
      ElMessage.success('编辑成功')
    } else {
      caseList.value.unshift({ ...editRow, id: idSeed++ })
      ElMessage.success('新增成功')
    }
    editVisible.value = false
  })
}

// 删除弹窗
const deleteVisible = ref(false)
const deleteTarget = ref<CaseItem | null>(null)
function handleDelete(row: CaseItem) {
  deleteTarget.value = row
  deleteVisible.value = true
}
function confirmDelete() {
  if (deleteTarget.value) {
    caseList.value = caseList.value.filter(t => t.id !== deleteTarget.value!.id)
    ElMessage.success('删除成功')
  }
  deleteVisible.value = false
}
</script>

<style scoped>
.case-collection {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.header-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.case-card {
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(120deg,#fff 70%,#e7fbee 100%);
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.case-title {
  font-size: 16px;
  font-weight: bold;
  color: #308d2d;
  margin-bottom: 5px;
}
.case-scene {
  font-size: 15px;
  color: #555;
  margin-bottom: 3px;
}
.case-highlight {
  font-size: 14px;
  color: #E6A23C;
  margin-bottom: 3px;
}
.case-experience {
  font-size: 14px;
  color: #409EFF;
  margin-bottom: 8px;
}
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
</style>
